<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>组织架构</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <van-collapse v-show="erjiList.length > 0 && isLoading == false" v-model="activeNames"
                  @change="onchange"
                  style="height: calc(100vh - 44px - 50px - 60px)">
     <div    v-for="(curr, index) in erjiList"
             :key="index"
             @click="clickErji(curr)">
       <van-collapse-item
         v-if="erjiList"
         :name="curr.id"
       >
         <template #title>
           <div class="tempTitle"  >
            <span>
              <img class="zuzhiImg" src="../../../../assets/组织架构灰.png" alt="">
              {{curr.group_name}}
            </span>
           </div>
         </template>
         <template #value>
           <button @click.stop="update(curr)" class="updateBtn">
             编辑
           </button>
         </template>
         <p class="PTree"  v-for="(currXiaji, xiajiIndex) in curr.xiaji"
            :key="xiajiIndex"
            :name="currXiaji.id">
          <span>
            <img src="../../../../assets/未选中树状灰.png" class="treeImg" alt="">
            <img class="zuzhiImg" src="../../../../assets/组织架构灰.png" alt="">
            {{currXiaji.group_name}}
          </span>
           <span>
            <button @click.stop="update(currXiaji)" class="updateBtn" style="margin-right: 20px">
              编辑
            </button>
          </span>
         </p>
       </van-collapse-item>
     </div>
    </van-collapse>
    <div v-show="isLoading"
      style="width: 100%;height: calc(100vh - 44px - 50px - 60px);display: flex;align-items: center;justify-content: center" >
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: calc(100vh - 44px - 50px - 60px)"
      v-show="erjiList.length <= 0 && isLoading == false"
      class="custom-image"
      :image="require('../../../../assets/空两本书.png')"
      description="暂无组织架构信息"
    />
    <div class="btnBottom">
      <button class="keepBtn" @click="run"><img src="../../../../assets/白添加.png" alt="">新建
      </button>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: 'OrganizationalList',
  data () {
    return {
      isEdit: this.$route.query.isEdit,
      team_id: this.$route.query.team_id,
      erjiList: [],
      isLoading: true,
      activeNames: [],
      activeNamesChilden: []
    }
  },
  mounted () {
    this.getTeam()
  },
  methods: {
    onchange (val) {
      console.log(val)
    },
    // 点击编辑
    update (item) {
      this.$router.push({path: '/OrganizationalAdd',
        query: {
          isEdit: this.isEdit,
          team_id: this.team_id,
          id: item.id
        }})
    },
    // 二级列表点击下的成员信息或二级列表
    clickErji (item) {
      this.$http.findTeamGroupTwoAndThree({id: item.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let Data = res.data.data
            this.$set(item, 'xiaji', Data.xiaji)
            this.$set(item, 'members', Data.members)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getTeam () {
      this.isLoading = true
      this.$http.findTeamGroupTwo({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.erjiList = res.data.data
            this.isLoading = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    run () {
      this.$router.push({path: '/OrganizationalAdd',
        query: {
          isEdit: this.isEdit,
          team_id: this.team_id
        }})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}

.btnBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnBottom .keepBtn{
  width: 90%;
  height: 44px;
  border-radius: 20px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
}
.keepBtn img{
  width: 13px;
  height: 13px;
  margin-right: 8px;
}
.photo{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.treeImg{
  width: 8px;
  height: 8px;
}
.zuzhiImg{
  width: 15px;
  height: 14px;
}
/deep/ .van-collapse-item__content {
  padding: 0px 16px;
}
.PTree {
  height: 44px;
  padding-left: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
}
.updateBtn{
  width: 60px;
  height: 29px;
  background: #FFFFFF;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  color: #1da4f2;
  font-weight: bold;
}
</style>
